<template>
	<view>
		<view class="main-flex contact_us">
			<view class="inner-flex">

				<view class="form-wrap">
					<view class="tutorial-form">
						<view class="tutorial-form-row nickname-row"><label hidden="" for="nickname">Your
								Nickname</label><input placeholder="Your Nickname" type="text" name="nickname"
								id="nickname" value=""></view>
						<view class="tutorial-form-row email-row"><label hidden="" for="email">Your Email</label><input
								placeholder="Your Email" type="email" name="email" id="email" value=""></view>
						<view class="tutorial-form-row phone-row"><label hidden="" for="phone">Your Phone</label><input
								placeholder="Your Phone" type="text" name="phone" id="phone" value=""></view>
						<view class="tutorial-form-row message-row"><label hidden="" for="message">Your
								message</label><textarea placeholder="Your message" name="message"
								id="message"></textarea>
							<view class="message-limit"><span>0 / 500</span></view>
						</view>
					</view>
				</view>
				<view class="icons-box">
					<view class="icon-box web3">
						<view class="icon-image"></view>
						<view class="icon-top-text"><span>WEB3</span></view>
					</view>
					<view class="icon-box decentralized">
						<view class="icon-image"></view>
						<view class="icon-top-text"><span>TRANSPARENCY</span></view>
					</view>
					<view class="icon-box secure">
						<view class="icon-image"></view>
						<view class="icon-top-text"><span>SECURE</span></view>
					</view>
					<view class="icon-box blockchain">
						<view class="icon-image"></view>
						<view class="icon-top-text"><span>POLYGON CHAIN</span></view>
					</view>
				</view>
				<!-- 	<veiw class="contact-you">
					<veiw>One of our managers will contact you.</veiw>
					<veiw class="apply-button"></veiw>
			     </view> -->
			</view>
		</view>
		<!-- 分享弹出内容 -->
		<view class="popups_container" v-if="showLink">
			<view class="popup">
				<view class="close" @click="closeLink"></view>
				<!-- <view class="content"> -->
				<view class="new_campaign_form" v-if="shareUrls">
					<image src="/static/images/entryscreen/genAffLink.png" class="new_campaign_form_header"
						mode="widthFix">
						<view class="input_label">{{$t('myurls')}}</view>
						<view class="input_box"><input class="name_input" maxlength="15"
								:placeholder="Name_membership_link" v-model="shareUrls"></view>
						<view class="gold_btn" @tap="clipboard">{{$t('copyurl')}}</view>
				</view>
				<view class="new_campaign_form" v-else>
					<image src="/static/images/entryscreen/genAffLink.png" class="new_campaign_form_header"
						mode="widthFix">
						<view class="input_label">{{$t('My_link_nickname')}}</view>
						<view class="input_box"><input class="name_input" maxlength="15"
								:placeholder="Name_membership_link" v-model="shareCode"></view>
						<view class="input_instruct">{{$t('numbers_are_allowed')}}</view>
						<view class="gold_btn" @click="toShare()">{{$t('Create_link')}}</view>
				</view>
				<!-- </view> -->
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				Name_membership_link: this.$t('Name_membership_link'),
				showPurse: false,
				isopen: false,
				showLink: false,
				hasToken: false,
				shareCode: '',
				shareUrls: false,
				showTabbar: true,
				shareList: '',
				open_wallet: false,
				page: 1,
				current: 1,
				backgroundColor: '#191c1d',
				tabBar: [{
						pagePath: '/pages/dashboard/faq',
						text: this.$t('question'),
						iconPath: '/static/images/common/eb2ad3e9f15cd5c45523.svg',
						selectedIconPath: '/static/images/common/faq.png',
						verify: true
					},
					{
						pagePath: '/pages/dashboard/share_links',
						text: this.$t('Promotion-link'),
						iconPath: '/static/images/common/1c328bea0664621ae940.svg',
						selectedIconPath: '/static/images/common/2ddef14ffefdf0893c68.svg',

						verify: true
					},
					{
						pagePath: '/pages/dashboard/share_report',
						text: this.$t('Income-statement'),
						iconPath: '/static/images/common/27ef8eecf3261b27000a.svg',
						selectedIconPath: '/static/images/common/e71ec10e6a3c2f14b631.svg',
						verify: true
					},
					{
						pagePath: '/pages/dashboard/dashboard',
						text: this.$t('control-panel'),
						iconPath: '/static/images/common/e5eb47a4e075e5a7a1e6.svg',
						selectedIconPath: '/static/images/common/0713c468a0e288a09478.svg',
						verify: true
					}
				],
			};
		},
		onLoad() {
			if (this.tui.isLogin()) {
				this.hasToken = true;
				this.init();
			}

		},
		methods: {
			tabbarSwitch(e) {

				this.current = e.index;

			},
			init() {
				let datas = {
					page: 1,
					size: 20
				};
				/* 获取分享地址 */
				let shareUrls = this.tui.request('/api/user/shared', 'post', datas, 1000, 1, '', 'shared');
				Promise.resolve(shareUrls).then((value) => {
					if (value.code == 200) {
						this.shareUrls = value.data.shared_url
					} else {

					}
				})
				let result = this.tui.request('/api/user/getMyTeam', 'post', datas, 1000, 1, '', 'getMyTeam');
				Promise.resolve(result).then((value) => {
					if (value.code == 200) {
						if (value.data) {
							this.page++;
							this.shareList = value.data
						}

					}
				})

			},
			navs() {
				this.isopen = true
				this.showTabbar = false
			},
			closeOpen() {

				this.isopen = false
			},
			openShare() {
				this.showLink = true;
			},
			goBack() {
				uni.navigateBack()
			},
			openModel() {
				this.open_wallet = true;
			},
			closePop() {
				this.open_wallet = false;
				this.showTabbar = true
			},
			toShare() {
				let token = this.tui.getToken();
				let datas = {
					codes: this.shareCode
				};
				let result = this.tui.request('api/user/createShare', 'post', datas, 1000, 1, '', 'createShare');
				Promise.resolve(result).then((value) => {

					if (value.code != 200) {
						this.showTips(value.message, 'warning');

					} else {
						this.showTips(this.$t('saveSuccess'), 'green');

					}
				})
			},
			lower(codes) {
				let datas = {
					codes: codes
				};
				let result = this.tui.request('/api/user/shareListCode', 'get', datas, 1000, 1, '', 'shareListCode');
				Promise.resolve(result).then((value) => {
					if (value.code == 200) {
						this.shareList = value.data
					}
				})
			},
			clipboard: function(event) {
				copys.getClipboardData(this.shareUrls, (res) => {
					// #ifdef H5 || MP-ALIPAY
					if (res) {
						this.showTips(this.$t('copy-success'), 'green');
					} else {
						this.showTips(this.$t('copy-failed'), 'warning');
					}
					// #endif
				}, event)
			},
			closeLink() {
				this.showLink = false;
			},
			showTips: function(msg, type) {

				let options = {
					msg: msg,
					duration: 2000,
					type: type
				};
				this.$refs.toast.showTips(options);
			},
		},
		onReachBottom() {
			// if (!this.pullUpOn) return;
			this.loadding = true
			setTimeout(() => {
				this.loadding = false
				this.pullUpOn = false
			}, 1000)
			let datas = {
				page: this.page,
				size: 20
			};
			let accoutList = this.tui.request('api/v1/user/shareList', 'get', datas, 1000, 1, '');
			Promise.resolve(accoutList).then((value) => {
				if (value.status == 200) {
					if (this.recordsList.concat(value.data)) {
						this.recordsList = this.recordsList.concat(value.data);
						this.page++;
					}

				} else {
					this.tui.toast(value.message);
				}
			})
		}
	}
</script>

<style lang="scss">
	@import '../../static/css/defalut.css';

	page {
		// background-color: #0c0d13;
		// background: #000;
		color: #fff;
		font-family: "Barlow Semi Condensed", sans-serif;
		// margin: 0;
		// padding: 0;
		// overflow: hidden;
	}

	.contact_us .main-flex .form-box {
		/* min-width: 46em;
	    min-width: 34em;
	    max-width: 48em;
	    padding: 3em;
	    background-color: rgba(0, 0, 0, 0.35); */
		max-width: 50em;
	}

	.contact_us .main-flex .form-box .form-wrap {
		/* min-width: 46em;
	    min-width: 34em;
	    max-width: 48em; */
		padding: 3em;
		background-color: rgba(0, 0, 0, 0.35);
	}

	.contact_us .tutorial-form {}

	.contact_us .tutorial-form .tutorial-form-row {
		position: relative;
		margin-bottom: 2em;
	}

	.contact_us .tutorial-form .tutorial-form-row:last-of-type {
		margin-bottom: 0;
	}

	.contact_us .tutorial-form .tutorial-form-row.message-row {
		padding-bottom: 2em;
	}

	.contact_us .tutorial-form .tutorial-form-row.message-row::before {
		content: '';
		position: absolute;
		bottom: 0;
		width: 100%;
		height: 4em;
		background-color: black;
		border-radius: 0 0 0.7em 0.7em;
		z-index: -1;
	}

	.contact_us .tutorial-form input,
	.contact_us .tutorial-form textarea {

		width: 100%;
		background-color: #000;
		color: #cecece;
		font-family: 'SF UI Display', sans-serif;

		font-size: 1.6em;
		/* padding: 1em 1.4em; */
		padding: calc(1rem/1.6) calc(1.4rem/1.6);
		/* border: solid 0.2em #979797; */
		border: solid calc(0.2rem/1.6) #979797;
		/* border-radius: 0.7em; */
		border-radius: calc(0.7rem/1.6);

	}

	.contact_us .tutorial-form input[type="text"] {}

	.contact_us .tutorial-form textarea {
		height: 8em;
		resize: none;
	}

	.contact_us .apply-button {
		width: 100%;
		background-color: #f4d56f;
		color: #000;
		padding: 1.8em 2.3em;
		margin-top: 2em;
		border-radius: 0.7em;
		font-family: 'SF UI Display', sans-serif;
	}

	.contact_us .apply-button:disabled {
		background: #b29944;
		cursor: progress;
		transition: background-color 0.3s ease-out;
	}

	.contact_us .apply-button span {
		font-size: 2.1em;
	}

	.contact_us .tutorial-form .message-limit {
		position: absolute;
		bottom: 0;
		right: 0;
		width: 6.2em;
		height: 2.2em;
		line-height: 2.2em;
		font-family: 'SF UI Display', sans-serif;
		text-align: right;
		color: #f4d56f;
		color: #a5a5a5;
		padding: 0 0.8em 0 0;
	}

	.contact_us .tutorial-form .message-limit span {
		font-size: 1.1em;
	}
</style>